<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>中山大学刷题平台 - 学习资源</title>
    <!-- 外部CDN资源 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义Tailwind配置 -->
    <link rel="icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.png') }}" type="image/png">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'sysu-blue': '#045525',        // 校色主蓝
                        'sysu-lightBlue': '#e6f7ff',   // 浅蓝辅助色
                        'sysu-darkBlue': '#03441D',    // 深蓝
                        'sysu-gray': '#F7F9FC',        // 浅灰背景色
                        'sysu-green': '#045525',       // 校色主绿
                        'sysu-yellow': '#faad14',      // 校色主黄
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 4px 20px rgba(0, 0, 0, 0.05)',
                        'card-hover': '0 8px 30px rgba(0, 0, 0, 0.1)',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .btn-sysu {
                @apply bg-sysu-blue text-white px-4 py-2 rounded-lg hover:bg-sysu-darkBlue transition-colors;
            }
            .btn-outline {
                @apply border border-gray-300 bg-white text-gray-700 px-4 py-2 rounded-lg hover:border-sysu-blue hover:text-sysu-blue transition-colors;
            }
            .card-hover {
                @apply hover:shadow-card-hover transition-shadow duration-300 transform hover:-translate-y-1;
            }
            .section-title {
                @apply text-2xl font-bold text-gray-800 mb-6 relative after:absolute after:bottom-0 after:left-0 after:h-1 after:w-12 after:bg-sysu-blue;
            }
            .resource-tag {
                @apply inline-block px-2 py-1 text-xs rounded-full mr-2 mb-2;
            }
        }
    </style>
</head>
<body class="bg-gray-50 opacity-0" id="body">
    <!-- 顶部导航栏 -->
    <header class="sticky top-0 z-50 bg-white border-b border-gray-200 transition-all duration-300 shadow-sm transform translate-y-[-20px] opacity-0" id="header">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between items-center h-16">
                <!-- 校徽+平台名称 -->
                <div class="flex items-center">
                    <div class="w-10 h-10 bg-sysu-blue text-white rounded-lg flex items-center justify-center mr-3 shadow-sm">
                        <i class="fa fa-graduation-cap text-xl"></i>
                    </div>
                    <h1 class="text-lg font-bold text-sysu-blue">中山大学刷题平台</h1>
                </div>

                <!-- 核心导航（桌面端） -->
                <nav class="hidden md:flex space-x-6">
                    <a href="/" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">首页</a>
                    <a href="/questions" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">题库</a>
                    <a href="/contests" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">竞赛</a>
                    <a href="/ranking" class="text-gray-600 hover:text-sysu-blue py-5 transition-colors">排行榜</a>
                    <a href="/resources" class="text-sysu-blue font-medium border-b-2 border-sysu-blue py-5">学习资源</a>
                </nav>

                <!-- 用户功能区 -->
                <div class="flex items-center space-x-4">
                    <!-- 搜索框 -->
                    <div class="relative hidden sm:block">
                        <input type="text" placeholder="搜索学习资源"
                               class="pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm w-40 lg:w-56">
                        <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
                    </div>

                     <!-- 用户区域容器（初始为空，由JS动态填充） -->
                    <div class="flex items-center space-x-4" id="user-area-container">
                        <!-- 加载状态 -->
                        <div class="flex items-center" id="loading-indicator">
                            <div class="w-6 h-6 border-2 border-gray-300 border-t-sysu-blue rounded-full animate-spin"></div>
                        </div>
                    </div>

                    <script>
                    // 页面加载完成后检查登录状态
                    document.addEventListener('DOMContentLoaded', function() {
                        checkLoginStatus();
                        initSmoothEffects();
                    });

                    // 检查登录状态的AJAX请求
                    async function checkLoginStatus() {
                        const container = document.getElementById('user-area-container');
                        const loadingIndicator = document.getElementById('loading-indicator');

                        try {
                            const token = localStorage.getItem('token');
                            // 发送请求到后端验证接口
                            const response = await fetch('/api/check_login', {
                                method: 'GET',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            });

                            if (!response.ok) {
                                throw new Error('验证请求失败');
                            }

                            const data = await response.json();

                            // 根据返回的登录状态渲染不同内容
                            if (data.is_logged_in) {
                                console.log(data.avatar);
                                renderLoggedInView(container, data || {});
                            } else {
                                renderLoggedOutView(container);
                            }
                        } catch (error) {
                            console.error('登录状态验证出错:', error);
                            // 出错时默认显示登录/注册按钮
                            renderLoggedOutView(container);
                        } finally {
                            // 隐藏加载指示器
                            if (loadingIndicator) {
                                loadingIndicator.remove();
                            }
                        }
                    }

                    // 渲染已登录视图
                    function renderLoggedInView(container, userData) {
                        container.innerHTML = `
                            <div class="relative" id="userDropdown">
                                <button class="flex items-center space-x-2 focus:outline-none cursor-pointer" id="dropdownTrigger">
                                    <img src="${'http://localhost:5000/api/v1/avatar/' + userData.user_id || 'https://picsum.photos/id/1005/40/40'}"
                                         alt="${userData.username || '用户头像'}"
                                         class="w-8 h-8 rounded-full border-2 border-transparent hover:border-sysu-blue transition-colors">
                                    <i class="fa fa-angle-down text-gray-500 hidden sm:block transition-transform duration-300" id="dropdownIcon"></i>
                                </button>
                                <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 hidden z-50" id="dropdownMenu">
                                    <a href="/profile/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">个人中心</a>
                                    <a href="/my_progress/${ userData.user_id }" class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors">学习进度</a>
                                    <a class="block px-4 py-2 text-gray-700 hover:bg-sysu-lightBlue hover:text-sysu-blue transition-colors" onclick="logout()">退出登录</a>
                                </div>
                            </div>
                        `;

                        // 绑定下拉菜单事件
                        bindDropdownEvents();
                    }

                    // 退出登录
                    function logout() {
                        try {
                            const token = localStorage.getItem('token');
                            // 发送退出登录请求到后端
                            fetch('/api/v1/logout', {
                                method: 'POST',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'Authorization': 'Bearer ' + token
                                }
                            }).then(() => {
                                // 清除本地存储中的token
                                localStorage.removeItem('token');
                                // 刷新页面或跳转到登录页
                                window.location.href = '/';
                            });
                        }
                        catch (error) {
                            console.error('退出登录出错:', error);
                        }
                    }

                    // 渲染未登录视图
                    function renderLoggedOutView(container) {
                        container.innerHTML = `
                            <div class="flex items-center space-x-3">
                                <a href="/login" class="text-gray-600 hover:text-sysu-blue transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                    登录
                                </a>
                                <a href="/register" class="bg-sysu-blue text-white hover:bg-sysu-blue/90 transition-colors px-3 py-2 rounded-md text-sm font-medium">
                                    注册
                                </a>
                            </div>
                        `;
                    }

                    // 绑定下拉菜单交互事件
                    function bindDropdownEvents() {
                        const dropdownTrigger = document.getElementById('dropdownTrigger');
                        const dropdownMenu = document.getElementById('dropdownMenu');
                        const dropdownIcon = document.getElementById('dropdownIcon');
                        const userDropdown = document.getElementById('userDropdown');

                        if (!dropdownTrigger || !dropdownMenu || !dropdownIcon) return;

                        // 点击头像按钮切换下拉菜单显示状态
                        dropdownTrigger.addEventListener('click', (e) => {
                            e.stopPropagation();
                            dropdownMenu.classList.toggle('hidden');
                            dropdownIcon.classList.toggle('rotate-180');
                        });

                        // 点击页面其他区域关闭下拉菜单
                        document.addEventListener('click', () => {
                            if (!dropdownMenu.classList.contains('hidden')) {
                                dropdownMenu.classList.add('hidden');
                                dropdownIcon.classList.remove('rotate-180');
                            }
                        });

                        // 点击下拉菜单内部不关闭
                        dropdownMenu.addEventListener('click', (e) => {
                            e.stopPropagation();
                        });

                        // 鼠标离开整个下拉区域时关闭
                        userDropdown.addEventListener('mouseleave', () => {
                            setTimeout(() => {
                                if (!dropdownMenu.matches(':hover') && !dropdownTrigger.matches(':hover')) {
                                    dropdownMenu.classList.add('hidden');
                                    dropdownIcon.classList.remove('rotate-180');
                                }
                            }, 300);
                        });
                    }

                    // 初始化平滑效果
                    function initSmoothEffects() {
                        // 导航栏显示动画
                        setTimeout(() => {
                            document.getElementById('navbar').classList.add('visible');
                        }, 100);

                        // 移动端菜单按钮事件
                        const mobileMenuBtn = document.getElementById('mobile-menu-btn');
                        const mobileMenu = document.getElementById('mobile-menu');

                        if (mobileMenuBtn && mobileMenu) {
                            mobileMenuBtn.addEventListener('click', () => {
                                mobileMenu.classList.toggle('hidden');
                                // 添加菜单切换动画
                                if (!mobileMenu.classList.contains('hidden')) {
                                    mobileMenu.style.maxHeight = '0';
                                    mobileMenu.style.overflow = 'hidden';
                                    mobileMenu.style.transition = 'max-height 0.3s ease-out';
                                    setTimeout(() => {
                                        mobileMenu.style.maxHeight = mobileMenu.scrollHeight + 'px';
                                    }, 10);
                                } else {
                                    mobileMenu.style.maxHeight = '0';
                                }
                            });
                        }

                        // 设置滚动显示动画
                        setupScrollAnimation();
                    }

                    // 设置滚动显示动画
                    function setupScrollAnimation() {
                        const fadeElements = document.querySelectorAll('.fade-in');

                        // 初始检查可见元素
                        checkFadeElements(fadeElements);

                        // 滚动时检查可见元素
                        window.addEventListener('scroll', () => {
                            checkFadeElements(fadeElements);
                        });
                    }

                    // 检查并显示进入视口的元素
                    function checkFadeElements(elements) {
                        elements.forEach((element, index) => {
                            const rect = element.getBoundingClientRect();
                            const windowHeight = window.innerHeight || document.documentElement.clientHeight;

                            // 元素进入视口
                            if (!element.classList.contains('visible')) {
                                // 依次显示，添加延迟效果
                                setTimeout(() => {
                                    element.classList.add('visible');
                                }, index * 200);
                            }
                        });
                    }
                    </script>

                    <!-- 移动端菜单按钮 -->
                    <button class="md:hidden p-2 text-gray-600 hover:text-sysu-blue" id="mobile-menu-btn">
                        <i class="fa fa-bars text-lg"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 移动端导航（默认隐藏） -->
        <div class="md:hidden hidden pb-4" id="mobile-menu">
            <div class="flex items-center relative mb-4 mx-2">
                <input type="text" placeholder="搜索学习资源"
                       class="w-full pl-8 pr-3 py-2 rounded-lg border border-gray-300 focus:border-sysu-blue focus:outline-none text-sm">
                <i class="fa fa-search absolute left-3 top-2.5 text-gray-400 text-sm"></i>
            </div>
            <nav class="flex flex-col space-y-2 mx-2">
                <a href="/" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">首页</a>
                <a href="/questions" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">题库</a>
                <a href="/contests" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">竞赛</a>
                <a href="/ranking" class="text-gray-600 px-2 py-2 hover:bg-sysu-lightBlue rounded">排行榜</a>
                <a href="/resources" class="text-sysu-blue px-2 py-2 bg-sysu-lightBlue rounded font-medium">学习资源</a>
            </nav>
        </div>
    </header>

    <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <!-- 页面标题与控制区 -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 gap-4 opacity-0 transform translate-y-[20px]" id="page-title">
            <div>
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">学习资源</h2>
                <p class="text-gray-500 mt-1">算法教程、视频课程、实战项目，助力编程能力提升</p>
            </div>

            <div class="flex flex-wrap gap-3 w-full sm:w-auto">
                <div class="relative">
                    <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-10 py-2 focus:outline-none focus:border-sysu-blue text-sm">
                        <option>全部资源</option>
                        <option>电子书</option>
                        <option>视频课程</option>
                        <option>实战项目</option>
                        <option>面试资料</option>
                    </select>
                    <i class="fa fa-chevron-down absolute right-3 top-2.5 text-gray-400 text-xs pointer-events-none"></i>
                </div>
                <div class="relative">
                    <select class="appearance-none bg-white border border-gray-300 rounded-lg pl-3 pr-10 py-2 focus:outline-none focus:border-sysu-blue text-sm">
                        <option>全部分类</option>
                        <option>算法基础</option>
                        <option>数据结构</option>
                        <option>编程语言</option>
                        <option>系统设计</option>
                        <option>面试技巧</option>
                    </select>
                    <i class="fa fa-chevron-down absolute right-3 top-2.5 text-gray-400 text-xs pointer-events-none"></i>
                </div>
            </div>
        </div>

        <!-- 资源统计卡片 -->
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
            <div class="bg-white rounded-xl p-5 shadow-card opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">资源总数</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">246</h3>
                    </div>
                    <div class="w-10 h-10 bg-sysu-blue/10 text-sysu-blue rounded-full flex items-center justify-center">
                        <i class="fa fa-book"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-card opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="200">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">电子书</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">89</h3>
                    </div>
                    <div class="w-10 h-10 bg-green-100 text-green-600 rounded-full flex items-center justify-center">
                        <i class="fa fa-file-text-o"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-card opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">视频课程</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">67</h3>
                    </div>
                    <div class="w-10 h-10 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center">
                        <i class="fa fa-play-circle-o"></i>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl p-5 shadow-card opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-gray-500 text-sm">实战项目</p>
                        <h3 class="text-2xl font-bold text-gray-800 mt-1">52</h3>
                    </div>
                    <div class="w-10 h-10 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center">
                        <i class="fa fa-cogs"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 电子书专区 -->
        <section class="mb-16">
            <h3 class="section-title opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="100">电子书专区</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 电子书卡片1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="200">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/24/400/300" alt="算法导论" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-sysu-blue text-white">算法</span>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">算法导论（原书第3版）</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            国际知名的算法教材，全面系统地介绍了计算机算法，内容涵盖算法复杂度分析、数据结构等。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-eye mr-1"></i> 2.4k
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-download mr-1"></i> 下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 电子书卡片2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/20/400/300" alt="数据结构与算法分析" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-sysu-blue text-white">数据结构</span>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">数据结构与算法分析（C语言描述）</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            深入讨论了数据结构的设计与分析，包含大量C语言实现示例，适合算法入门学习。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-eye mr-1"></i> 1.8k
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-download mr-1"></i> 下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 电子书卡片3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/160/400/300" alt="编程珠玑" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-green-500 text-white">编程技巧</span>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">编程珠玑（第2版）</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            汇集了程序设计领域多年的实践经验，通过一系列有趣的问题和解决方案，展示了编程的精髓。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-eye mr-1"></i> 1.5k
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-download mr-1"></i> 下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 电子书卡片4 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/180/400/300" alt="剑指Offer" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-yellow-500 text-white">面试</span>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">剑指Offer：名企面试官精讲典型编程题</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            针对程序员面试中的常见问题，提供了详细的解题思路和优化方法，是求职面试的必备资料。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-eye mr-1"></i> 3.2k
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-download mr-1"></i> 下载
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 text-center opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="600">
                <a href="#" class="inline-flex items-center text-sysu-blue hover:text-sysu-darkBlue font-medium">
                    查看更多电子书 <i class="fa fa-angle-right ml-2"></i>
                </a>
            </div>
        </section>

        <!-- 视频课程专区 -->
        <section class="mb-16">
            <h3 class="section-title opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="100">视频课程专区</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 视频课程卡片1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="200">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/0/400/300" alt="算法基础" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-purple-500 text-white">入门</span>
                        <div class="absolute bottom-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded">
                            12小时
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="w-12 h-12 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center">
                                <i class="fa fa-play text-white text-xl"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">算法基础与应用（Python版）</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            从基础算法概念讲起，结合Python实现，适合零基础入门算法学习。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-user mr-1"></i> 张教授
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-play-circle-o mr-1"></i> 观看
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 视频课程卡片2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/16/400/300" alt="数据结构" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-purple-500 text-white">进阶</span>
                        <div class="absolute bottom-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded">
                            16小时
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="w-12 h-12 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center">
                                <i class="fa fa-play text-white text-xl"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">数据结构实战：从理论到应用</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            深入讲解常用数据结构的设计原理与实现方法，包含大量实战案例。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-user mr-1"></i> 李教授
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-play-circle-o mr-1"></i> 观看
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 视频课程卡片3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/119/400/300" alt="动态规划" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-red-500 text-white">高级</span>
                        <div class="absolute bottom-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded">
                            8小时
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="w-12 h-12 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center">
                                <i class="fa fa-play text-white text-xl"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">动态规划专题：从入门到精通</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            系统讲解动态规划思想与解题技巧，分析经典问题与竞赛真题。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-user mr-1"></i> 王教授
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-play-circle-o mr-1"></i> 观看
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 视频课程卡片4 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/180/400/300" alt="面试技巧" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-yellow-500 text-white">面试</span>
                        <div class="absolute bottom-3 right-3 bg-black/70 text-white text-xs px-2 py-1 rounded">
                            6小时
                        </div>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="w-12 h-12 bg-white/30 backdrop-blur-sm rounded-full flex items-center justify-center">
                                <i class="fa fa-play text-white text-xl"></i>
                            </div>
                        </div>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">大厂算法面试技巧与实战</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            解析大厂算法面试流程与评分标准，提供针对性的备考策略和实战演练。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-user mr-1"></i> 赵工程师
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-play-circle-o mr-1"></i> 观看
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 text-center opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="600">
                <a href="#" class="inline-flex items-center text-sysu-blue hover:text-sysu-darkBlue font-medium">
                    查看更多视频课程 <i class="fa fa-angle-right ml-2"></i>
                </a>
            </div>
        </section>

        <!-- 项目专区 -->
        <section class="mb-16">
            <h3 class="section-title opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="100">实战项目专区</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 项目卡片1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="200">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/1/400/300" alt="在线评测系统" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-yellow-500 text-white">Python</span>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">简易在线评测系统</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            实现一个支持多语言提交的在线评测系统，包含题目管理、代码执行和结果判断功能。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-star mr-1"></i> 难度：中等
                            </span>
                            <a href="#" class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-github mr-1"></i> 源码
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 项目卡片2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/2/400/300" alt="搜索引擎" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-blue-500 text-white">Java</span>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">简易搜索引擎</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            实现一个基于倒排索引的简易搜索引擎，支持关键词检索、结果排序和分页功能。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-star mr-1"></i> 难度：较难
                            </span>
                            <a href="#" class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-github mr-1"></i> 源码
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 项目卡片3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/3/400/300" alt="数据可视化" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-green-500 text-white">JavaScript</span>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">算法可视化平台</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            实现常见排序、查找算法的可视化展示，直观理解算法执行过程和效率差异。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-star mr-1"></i> 难度：入门
                            </span>
                            <a href="#" class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-github mr-1"></i> 源码
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 项目卡片4 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                    <div class="relative h-48 bg-gray-200">
                        <img src="https://picsum.photos/id/4/400/300" alt="推荐系统" class="w-full h-full object-cover">
                        <span class="absolute top-3 left-3 resource-tag bg-purple-500 text-white">Python</span>
                    </div>
                    <div class="p-5">
                        <h4 class="text-lg font-bold text-gray-800 mb-2 line-clamp-1">个性化推荐系统</h4>
                        <p class="text-gray-500 text-sm mb-4 line-clamp-2">
                            基于用户行为数据，实现协同过滤推荐算法，为用户推荐感兴趣的题目和资源。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-star mr-1"></i> 难度：较难
                            </span>
                            <a href="#" class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-github mr-1"></i> 源码
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 text-center opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="600">
                <a href="#" class="inline-flex items-center text-sysu-blue hover:text-sysu-darkBlue font-medium">
                    查看更多实战项目 <i class="fa fa-angle-right ml-2"></i>
                </a>
            </div>
        </section>

        <!-- 面试资料专区 -->
        <section class="mb-16">
            <h3 class="section-title opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="100">面试资料专区</h3>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
                <!-- 面试资料卡片1 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="200">
                    <div class="p-5">
                        <div class="w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-file-text-o text-xl"></i>
                        </div>
                        <h4 class="text-lg font-bold text-gray-800 mb-2">大厂算法面试真题集</h4>
                        <p class="text-gray-500 text-sm mb-4">
                            收集整理BAT、字节跳动等大厂近3年算法面试真题，包含详细解题思路。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-calendar mr-1"></i> 2023更新
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-download mr-1"></i> 下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 面试资料卡片2 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="300">
                    <div class="p-5">
                        <div class="w-12 h-12 bg-green-100 text-green-600 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-file-pdf-o text-xl"></i>
                        </div>
                        <h4 class="text-lg font-bold text-gray-800 mb-2">系统设计面试指南</h4>
                        <p class="text-gray-500 text-sm mb-4">
                            涵盖常见系统设计问题的分析思路和解决方案，包含架构图和关键技术点。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-calendar mr-1"></i> 2023更新
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-download mr-1"></i> 下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 面试资料卡片3 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="400">
                    <div class="p-5">
                        <div class="w-12 h-12 bg-purple-100 text-purple-600 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-file-excel-o text-xl"></i>
                        </div>
                        <h4 class="text-lg font-bold text-gray-800 mb-2">编程求职时间表与规划</h4>
                        <p class="text-gray-500 text-sm mb-4">
                            包含求职准备时间规划表、复习重点和注意事项，帮助高效备战求职季。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-calendar mr-1"></i> 2023更新
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-download mr-1"></i> 下载
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 面试资料卡片4 -->
                <div class="bg-white rounded-xl overflow-hidden shadow-card card-hover opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="500">
                    <div class="p-5">
                        <div class="w-12 h-12 bg-yellow-100 text-yellow-600 rounded-full flex items-center justify-center mb-4">
                            <i class="fa fa-video-camera text-xl"></i>
                        </div>
                        <h4 class="text-lg font-bold text-gray-800 mb-2">模拟面试视频合集</h4>
                        <p class="text-gray-500 text-sm mb-4">
                            包含10场完整模拟面试视频，覆盖算法、项目和行为面试等环节。
                        </p>
                        <div class="flex justify-between items-center">
                            <span class="text-sm text-gray-400">
                                <i class="fa fa-calendar mr-1"></i> 2023更新
                            </span>
                            <button class="text-sysu-blue hover:text-sysu-darkBlue transition-colors">
                                <i class="fa fa-play mr-1"></i> 观看
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-6 text-center opacity-0 transform translate-y-[20px]" data-animation="true" data-delay="600">
                <a href="#" class="inline-flex items-center text-sysu-blue hover:text-sysu-darkBlue font-medium">
                    查看更多面试资料 <i class="fa fa-angle-right ml-2"></i>
                </a>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-12 opacity-0 transform translate-y-[20px]" id="footer">
        <div class="container mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-white text-sysu-blue rounded-lg flex items-center justify-center mr-3">
                            <i class="fa fa-graduation-cap text-xl"></i>
                        </div>
                        <h2 class="text-lg font-bold">中山大学刷题平台</h2>
                    </div>
                    <p class="text-gray-400 text-sm mt-2">助力中大学子提升编程能力</p>
                </div>
                <div class="flex flex-wrap justify-center gap-x-8 gap-y-2">
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-question-circle mr-1"></i> 帮助中心
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-envelope mr-1"></i> 联系我们
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-shield mr-1"></i> 隐私政策
                    </a>
                    <a href="#" class="text-gray-400 hover:text-white transition-colors">
                        <i class="fa fa-github mr-1"></i> 源码仓库
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400 text-sm">
                &copy; 2023 中山大学刷题平台. 所有权利保留.
            </div>
        </div>
    </footer>

    <script>
        // 添加自定义动画
        document.head.insertAdjacentHTML('beforeend', `
            <style>
                @keyframes fadeIn {
                    from { opacity: 0; }
                    to { opacity: 1; }
                }
                @keyframes slideInUp {
                    from { transform: translateY(20px); opacity: 0; }
                    to { transform: translateY(0); opacity: 1; }
                }
                @keyframes slideInLeft {
                    from { transform: translateX(-20px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                @keyframes slideInRight {
                    from { transform: translateX(20px); opacity: 0; }
                    to { transform: translateX(0); opacity: 1; }
                }
                .animate-fadeIn {
                    animation: fadeIn 0.5s ease-out forwards;
                }
                .animate-slideInUp {
                    animation: slideInUp 0.5s ease-out forwards;
                }
                .animate-slideInLeft {
                    animation: slideInLeft 0.5s ease-out forwards;
                }
                .animate-slideInRight {
                    animation: slideInRight 0.5s ease-out forwards;
                }
            </style>
        `);

        // 移动端菜单切换
        document.getElementById('mobile-menu-btn').addEventListener('click', function() {
            const mobileMenu = document.getElementById('mobile-menu');
            mobileMenu.classList.toggle('hidden');
            // 为移动端菜单添加动画
            if (!mobileMenu.classList.contains('hidden')) {
                mobileMenu.classList.add('animate-fadeIn');
            }
        });

        // 页面滚动时导航栏效果
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 10) {
                header.classList.add('shadow-md');
                header.classList.remove('shadow-sm');
            } else {
                header.classList.remove('shadow-md');
                header.classList.add('shadow-sm');
            }
        });

        // 页面加载完成后执行动画
        document.addEventListener('DOMContentLoaded', function() {
            // 页面主体淡入
            setTimeout(() => {
                document.getElementById('body').classList.add('animate-fadeIn');
            }, 100);

            // 头部导航栏滑入
            setTimeout(() => {
                document.getElementById('header').classList.add('animate-slideInUp');
            }, 200);

            // 页面标题区域滑入
            setTimeout(() => {
                document.getElementById('page-title').classList.add('animate-slideInUp');
            }, 400);

            // 为所有带有data-animation属性的元素添加动画
            const animatedElements = document.querySelectorAll('[data-animation="true"]');
            animatedElements.forEach(element => {
                const delay = element.getAttribute('data-delay') || 0;
                setTimeout(() => {
                    element.classList.add('animate-slideInUp');
                }, 600 + parseInt(delay));
            });

            // 页脚动画
            setTimeout(() => {
                document.getElementById('footer').classList.add('animate-slideInUp');
            }, 2000);
        });
    </script>
</body>
</html>
